<template>
	<view>
		<view class="page">
			<view class="example-body">
				<uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back" left-icon="arrowleft" style="position: relative;">
					<view class="flex-item" style="position: absolute;left: 0;right: 0;margin: auto;width: 50%;">消息中心</view>
				</uni-nav-bar>
			</view>
			<view class="message-top">
				<view class="message-container" v-for="(item, index) in listData" :key="index">
					<view class="message-content">
						<view class="message-logo">
							<image :src="item.messageType == '002'?'../../static/images/zhaopingreen.png':'../../static/images/baojingred.png'" mode=""></image>
						</view>
						<view class="mess">
							<view class="message-option">{{ item.smallType }}</view>
							<view class="message-right">
								<view class="right-wod">{{ item.sendTime ? item.sendTime : '--' }}</view>
								<!-- <view :class="item.isRead == '002'?''"></view> -->
								<!-- right-dot -->
							</view>
						</view>
						<view class="message-inf">{{ item.messageContent ? item.messageContent : '暂无消息' }}</view>
					</view>
					<view class="message-bottom">
						<!-- <view class="message-bottomone">
							<view class="bottomone-pic"><image src="../../static/images/deletered.png" mode=""></image></view>
							<view class="bottomone-detele">删除</view>
						</view> -->
						<view class="message-bottomtwo">
							<view class="bottomtwo-pic"><image src="../../static/images/dotsthree.png" mode=""></image></view>
							<view class="bottomtwo-dots">查看详情</view>
						</view>
					</view>
				</view>
				<!-- 使用加载更多组件 -->
				<uni-load-more :status="loadingType" :contentText="contentText"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import tools from '@/common/tools-new.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; //加载更多组件
export default {
	data() {
		return {
			listParam: {
				parameter: '',
				operators: '',
				queryValue: '',
				pageSize: 8,
				pageIndex: 1,
				orderBy: '',
				orderByType: ''
			},

			listData: [], //数据源

			contentText: {
				//加载更多提示文字
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据'
			},
			//定义加载方式
			loadingType: 'more'
		};
	},

	components: {
		uniNavBar,
		uniIcon,
		uniLoadMore
	},
	methods: {
		getDataList() {
			//显示加载动画
			this.loadingType = 'more';
			uni.showNavigationBarLoading();
			this.$api.MessageCenter.MessageList(this.listParam)
				.then(res => {
					console.log(res);
					var list = res[1].data.result.items;
					this.listData = list;
					//取接收时间
					this.listData.forEach((ele, index) => {
						ele.smallType = this.$helper.getTextByValue('报警类型', ele.smallType);
						ele.sendTime = this.$helper.dateFormat(ele.sendTime, false);
					});

					if (list.length == 0) {
						(this.listData = []), (this.loadingType = 'datas');
						//关闭动画
						uni.hideNavigationBarLoading();
						return false;
					}
					//如有数据，关闭动画
					uni.hideNavigationBarLoading();
					//得到数据后停止刷新
					uni.stopPullDownRefresh();
				})
				.catch(res => {
					uni.showToast({
						title: '接口数据请求失败',
						duration: 2000
					});
				});
		},

		getMoreDataList() {
			this.listParam.pageIndex++;
			//loadingType!=more直接返回
			if (this.loadingType != 'more') {
				return false;
			}
			this.loadingType = 'loading';
			//显示加载动画
			uni.showNavigationBarLoading();
			//请求接口
			this.$api.MessageCenter.MessageList(this.listParam)
				.then(res => {
					// console.log(res);
					if (this.listData.length == res[1].data.result.totalCount) {
						this.loadingType = 'datas';
						//关闭加载动画
						uni.hideNavigationBarLoading();
						return false;
					}

					var list = res[1].data.result.items;

					//取接收时间
					if (list.length > 0) {
						list.forEach((ele, index) => {
							ele.smallType = this.$helper.getTextByValue('报警类型', ele.smallType);
							ele.sendTime = this.$helper.dateFormat(ele.sendTime, false);
						});
					}

					this.listData = this.listData.concat(list);

					//将loadingType归more重置
					this.loadingType = 'more';
					//关闭加载动画
					uni.hideNavigationBarLoading();
				})
				.catch(res => {
					//接口请求失败
					uni.showToast({
						title: '接口请求失败',
						duration: 2000
					});
				});
		},

		//点击箭头返回父页面
		back() {
			uni.navigateBack({
				delta: 1
			});
		}
	},

	//初次加载数据
	onLoad: function() {
		this.getDataList();
	},

	//下拉刷新请求一次数据
	onPullDownRefresh: function() {
		this.listParam.pageIndex = 1;
		this.getDataList();
	},

	onReachBottom: function() {
		var timer = null;
		var _this = this;
		if (timer != null) {
			clearTimeout(timer);
		}
		timer = setTimeout(function() {
			_this.getMoreDataList();
		}, 1000);
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #F2F2F2;
}

.flex-item {
	font-size: 20px;
	text-align: center;
}

.uni-icon {
	padding-left: 42%;
}

.uni-navbar__header-btns:last-child {
	width: 120px;
}

.uni-navbar__header-btns {
	padding: 0;
}

.example-body {
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
}

.message-top{
	margin-top: 15px;
}

.message-container {
	width: 94%;
	background-color: #ffffff;
	border-radius: 3px;
	margin: 0 auto;
	margin-top: 12px;
	padding-bottom: 10px;
}

.message-content {
	width: 96%;
	border-bottom: 1px solid #eeeeee;
	overflow: hidden;
	margin: 0 auto;
	padding-bottom: 12px;
}

.message-logo {
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
	margin: 12px 12px 0px 0px;
}

.message-logo image {
	max-width: 100%;
	max-height: 100%;
}

.mess {
	overflow: hidden;
	margin-top: 12px;
}

.message-option {
	font-size: 18px;
	color: #333333;
	float: left;
}

.message-right {
	font-size: 14px;
	color: #666666;
	float: right;
}

.message-inf {
	font-size: 16px;
	color: #666666;
	margin-top: 6px;
	overflow: hidden;
	width: 80%;
}

.right-wod {
	float: left;
	margin: 2px;
}

.right-dot {
	width: 8px;
	height: 8px;
	background-color: #ea474a;
	border-radius: 50%;
	float: right;
	margin: 8px 0px 8px 8px;
}

.message-bottom {
	width: 96%;
	height: 45px;
	margin: 0 auto;
	margin-top: 15px;
}

.message-bottomone {
	width: 50px;
	height: 100%;
	float: right;
	font-size: 12px;
}

.bottomone-pic {
	width: 50px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.bottomone-pic image {
	max-width: 32%;
	max-height: 100%;
}

.bottomtwo-pic {
	width: 50px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.bottomtwo-pic image {
	max-width: 35%;
	max-height: 35%;
}

.bottomone-detele {
	text-align: center;
	color: #ea474a;
	margin-top: 5px;
	font-size: 14px;
}

.message-bottomtwo {
	height: 100%;
	float: right;
	font-size: 12px;
	/* margin-right: 20px; */
}

.bottomtwo-dots {
	font-size: 14px;
	color: #363636;
	margin-top: 4px;
	text-align: center;
}
</style>
